interface dataType{
    title:string,
    img:string,
    children:any
}

interface itemType{
    code:number,
    data:dataType[]
}

const ulist:Element|null=document.querySelector('.ulist');
const olist:Element|null=document.querySelector('.olist');

Ajax('/api/data',(res:itemType)=>{
    render(res.data)

})

const render=(data:dataType[])=>{
   (ulist as Element).innerHTML=data.map((v,i)=>{
        return `  <li class="${i===0 ? 'active':''}"><b>${v.title}</b></li>`
   }).join('');

   (olist as Element).innerHTML=data.map((v,i)=>{
    return  v.children.map((item:dataType,index:dataType)=>{
       
      return `
      <li class="${i===0 ? 'active':''}">
      <dl>
      <dt><img src="${item.img}" alt="" /> </dt>
      <dd>${item.title}</dd>
      </dl>
      </li>
      `
    }).join('')
}).join('')
      Bint()
}

const Bint=()=>{
    const lis:Element[]|null=Array.from(document.querySelectorAll('.ulist li')); 
    lis.forEach((v,i)=>{
        v.addEventListener('click',()=>{
            document.querySelector('.ulist .active')?.classList.remove('active');
            v.classList.add('active')
           document.querySelector('.olist .active')?.classList.remove('active');
           olist?.children[i].classList.add('active')
        })
    })
}